<template>
	<view class="wrap">
		<view class="search">
			<image src="@/static/search.png"></image>
			<input type="text" placeholder="搜索姓名" @input="debounce('getDepartmentList', 1000)" v-model="studentName" />
		</view>
		<view v-if="isInit" v-cloak>
			<view class="menu">
				<view class="borderBottom column" v-for="(item, index) in menuInfo.list" :key="index" :class="menuInfo.base.class">
					<navigator :url="item.url" :class="item.class">
						<text v-text="item[ele]" v-for="(ele, index) in menuInfo.base.menuProp" :key="index"></text>
						<icon class="iconfont iconarrow-right-copy-copy next"></icon>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			departmentId: '',
			studentName: '',
			menuInfo: {
				base: {
					menuProp: ['name', 'position']
				},
				list: []
			},
			isInit: false,
			options: '',
			timeout: null
		};
	},
	onLoad() {},
	onShow() {
		let pageOptions = this.getPageOptions();
		this.departmentId = pageOptions.id;
		this.getDepartmentDetail();
	},
	methods: {
		//搜索防抖
		debounce(func, wait) {
			let context = this;
			if (this.timeout) clearTimeout(this.timeout);
			this.timeout = setTimeout(() => {
				context[func]();
			}, wait);
		},
		async getDepartmentDetail() {
			let resp = await this.$http.post({
				url: `/oa/teacherInfo/page`,
				data: {
					departmentId: this.departmentId,
					pageSize: 1000,
					teacherName: this.studentName
				}
			});
			this.menuInfo.list = resp.result.rows.map(item => {
				return {
					id: item.id,
					jobNumber: item.jobNumber,
					name: item.teacherName,
					departmentId: item.departmentId,
					url: `detail?data=${JSON.stringify(item)}`,
					position: item.position
				};
			});
			this.isInit = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	width: 650upx;
	margin: 0 auto 20upx auto;
	border: 1upx solid #ddd;
	height: 60upx;
	border-radius: 30upx;
	position: relative;

	image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 5upx;
		left: 10upx;
	}

	input {
		width: 590upx;
		height: 50upx;
		position: absolute;
		left: 60upx;
		top: 5upx;
		color: #999;
		font-size: 28upx;
	}

	.input-placeholder {
		color: #999;
		font-size: 28upx;
	}
}

.menu {
	padding: 0 50upx 120upx 50upx;

	.column {
		display: flex;
		// align-items: center;

		.choose {
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			background: #fff;
			margin: 0 10upx;
			font-size: 0;
			border: 1upx solid #ccc;
		}

		.chooseActive {
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			font-size: 22upx;
			background: #3ed392;
			color: #fff;
			margin: 0 10upx;
			line-height: 30upx;
			text-align: center;
		}
		text {
			&:nth-of-type(2) {
				margin-left: auto;
			}
		}
	}

	navigator {
		flex: 0 1 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		justify-content:space-between;
		text{
			&:nth-of-type(1){
				flex:0 1 20%;
			}	
			&:nth-of-type(2){
				flex:0 1 30%;
			}
		}
	}

	.tit {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28upx;
			line-height: 100upx;
			font-weight: 600;
		}
	}

	.next {
		margin-left: auto;
		float: right;
	}
}

page {
	min-height: 100%;

	.wrap {
		min-height: 100%;
		padding-top: 20upx;
	}

	.submitButtonActive {
		position: fixed;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
